<script lang="ts" setup>
import type { AcctInfo } from '@/types'
import type { FormInst } from 'nutui-uniapp'
import { useSteps } from '@/composables/useSteps'
import { useApplyStore } from '@/store'

const { acctInfo, currentStep } = storeToRefs(useApplyStore())
const { submit } = useSteps('acct')

const ruleForm = ref<FormInst | null>(null)
// form初始化
const form = reactive<AcctInfo>({
  settleAcct: '',
  acctName: '',
  bankName: '',
  managerNo: '',
  managerName: '',
})

if (acctInfo.value.settleAcct !== '') {
  form.settleAcct = acctInfo.value.settleAcct
  form.acctName = acctInfo.value.acctName
  form.bankName = acctInfo.value.bankName
  form.managerNo = acctInfo.value.managerNo
  form.managerName = acctInfo.value.managerName
}

const acctUploader = ref()
function acctValidator() {
  return new Promise((resolve) => {
    acctUploader.value.validate().then((valid: boolean) => {
      resolve(valid)
    })
  })
}

const rules = {
  acct: [
    { validator: acctValidator, message: '请上传银行卡正面图片' },
  ],
  settleAcct: [
    { required: true, message: '请输入结算账户' },
  ],
  acctName: [
    { required: true, message: '请输入账户名称' },
  ],
  bankName: [
    { required: true, message: '请输入开户行名称' },
  ],
}

function acctUploaded(value: any) {
  if (value.type === 'acct') {
    form.settleAcct = value.settleAcct
  }
}

function acctValidated(data: any) {
  if (data.acctType === '02') {
    uni.showModal({
      title: '错误',
      content: '小微商户仅支持对私账户'
    })
  } else {
    form.acctName = data.acctName
    form.bankName = data.bankName
  }
}

function managerValidated(data: any) {
  if (data) {
    form.managerName = data.managerName
  } else {
    form.managerName = ''
  }
}

function clickPrev () {
  uni.navigateBack({
    delta: 1,
  })
}

function clickSubmit() {
  // 表单校验
  ruleForm.value?.validate().then(({ valid }) => {
    if (valid) {
      // 先存数据
      acctInfo.value = form
      submit()
    }
  })
}
</script>

<template>
  <div class="input">
    <steps-bar />
    <nut-form ref="ruleForm" :model-value="form" :rules="rules">
      <nut-form-item prop="acct" required>
        <acct-upload ref="acctUploader" @uploaded="acctUploaded" />
      </nut-form-item>
      <acct-validation v-model:acct="form.settleAcct" v-model:name="form.acctName" acct-type="01"
        @validated="acctValidated" inputAlign="right" />
      <nut-form-item label="开户行名称" prop="bankName" required>
        <nut-input v-model="form.bankName" class="nut-input-text" placeholder="请点击上方校验进行查询" type="text" disabled
          input-align="right" placeholder-style="color:#ccc;" />
      </nut-form-item>
      <nut-form-item label="客户经理工号" prop="managerNo">
        <manager-validation v-model="form.managerNo" @validated="managerValidated" input-align="right" />
      </nut-form-item>
      <nut-form-item label="客户经理姓名" prop="managerName">
        <nut-input v-model="form.managerName" class="nut-input-text" placeholder="请输入上方客户经理工号" type="text" disabled
          input-align="right" placeholder-style="color:#ccc;" />
      </nut-form-item>
    </nut-form>
    <div class="button">
      <!-- login-btns -->
      <nut-button type="primary" custom-class="login-btn  shake_o" block @click="clickSubmit">提交</nut-button>
    </div>
  </div>
</template>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "商户进件",
    "backgroundColorContent": "#f1f1f1"
  }
}
</route>

<style lang="sass" scoped>
.input
  .loader
    width: 210px
    display: flex
    justify-content: space-between
  .button
    margin: 40px 20px
    display: flex

:deep(.login-btns)
  margin-left: 20rpx

:deep(.login-btn)
  flex: 1
  width: 100%
  height: 85rpx
  margin-top: 30rpx
  background-color: #2196F3!important

:deep(.nut-uploader__upload)
  width: 100%!important

:deep(.nut-uploader__preview-img)
  width: 100%!important

:deep(.nut-step-main)
  margin-top: 20rpx
</style>
